.OneOne,
.TwoOne,
.ThrOne,
.ThrTwo,
.ThrThr,
.ThrFou,
.FouOne,
.FouTwo,
.FouThr,
.FouFou,
.EigOne,
.SixOne,
.SixTwo,
.SixFou,
.SixFiv,
.NinOne,
.TwoA01,
.ThrA01,
.FouA01,
.FivA01,
.SixA02,
.SixA03,
.SixA04,
.SevA01,
.EleA01,
.NinA01,
.TenA01,
.SixA01,
.SevOne,
.TenOne,
.FouA01,
.FouA02 {
	width: 100%;
	height: 100%;
	padding: 180px 16px 40px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.FouA01Box,
.FouA02Box {
	width: 100%;
	height: 100%;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;

	& > .OrganizationListA01 {
		width: 400px;
		position: relative;
		z-index: 1;
		padding-right: 16px;

		&::after {
			position: absolute;
			content: "";
			right: 7px;
			top: 0;
			width: 2px;
			height: 100%;
			background: rgba(174, 226, 255, 0.5);
		}
	}

	& > .TestTempA01 {
		flex: 1;

		.QualityQualified001 {
			padding: 0;
		}
	}

	& > .AsphaltMixingStationDetailTempA01 {
		flex: 1;
	}

	& > .TitleSmall001 {
		flex: 1;
	}

	& > .InvestmentA02 {
		flex: 1;
	}

	& > .MaterialTransportationA01 {
		flex: 1;
	}

	& > .InvestmentA01 {
		flex: 1;
	}

	& > .MonitorBox {
		flex: 1;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	& > .VideoPlayListA01 {
		flex: 1;
	}
}

.EigOne {
	position: relative;
	flex-direction: column;
}

.OneOne {
	justify-content: space-between;
	position: relative;
	z-index: 1;

	& > .ProjectListTem,
	& > .Right {
		height: 100%;
		position: relative;
		z-index: 2;

		&.ProjectListTem {
			width: 400px;
		}

		&.Right {
			width: 462px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.one {
				padding: 16px 32px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;

				& > div {
					width: 100%;
				}

				& > div:first-child {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 54px;
					background: linear-gradient(
						90deg,
						rgba(15, 63, 115, 0),
						rgba(15, 63, 115, 1),
						rgba(15, 63, 115, 0)
					);
					font-size: 21px;
					font-family: YouSheBiaoTiHei;
					color: #ffffff;
					margin-bottom: 16px;
				}

				& > div:nth-child(2) {
					& > div:first-child {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8px;

						& > div {
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin: 8px 0;

							& > span {
								font-size: 32px;
								color: white;
								margin-right: 8px;
							}

							& > div {
								& > div:first-child {
									font-size: 14px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
									color: #ffffff;
								}

								& > div:last-child {
									font-size: 16px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
									color: #efbf51;
								}
							}
						}
					}

					& > div:last-child {
						& > div:first-child {
							font-size: 14px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #ffffff;
							margin-bottom: 8px;
						}

						& > div:last-child {
							font-size: 14px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #efbf51;
						}
					}
				}

				& > div:nth-child(3) {
					background: rgba(17, 81, 95, 1);
					border-radius: 50px;
					height: 38px;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						flex: 1;
						height: 100%;
						font-size: 20px;
						font-family: YouSheBiaoTiHei;
						color: #ffffff;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;

						&.active {
							background: linear-gradient(0, #b91e00, #ffbe62);
							border-radius: 50px;
							border: 2px solid #a5e9fd;
						}
					}
				}

				& > div:nth-child(4) {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 200px;

					& > div:first-child {
						width: 160px;
						height: 160px;
						margin-right: 16px;
					}

					& > div:last-child {
						flex: 1;
						height: 200px;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						flex-direction: column;
						padding: 0 16px;
					}
				}
			}

			.two {
				width: 100%;
				height: 100%;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;

				& > div:first-child {
					height: 200px !important;
				}
			}
		}
	}
}

// .TwoOne {
// 	.ProjectListTem {
// 		width: 400px;
// 		margin-right: 16px;
// 	}

// 	.Right {
// 		flex: 1;
// 		height: 100%;
// 		display: flex;
// 		align-items: center;
// 		justify-content: center;
// 		flex-direction: column;

// 		&>div {
// 			width: 100%;
// 			flex: 1;

// 			&.Btm {
// 				width: 100%;
// 				height: 100%;
// 				display: flex;
// 				align-items: center;
// 				justify-content: center;
// 			}
// 		}

// 		.one {
// 			width: 100%;
// 			height: 100%;
// 			padding: 16px;
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;

// 			&>div {
// 				padding: 16px;
// 				height: 100%;
// 				border: 2px solid rgba(29, 229, 231, 0.2);

// 				&:first-child {
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;
// 					flex: 744;
// 					margin-right: 16px;

// 					&>div:first-child {
// 						margin: 0 64px;
// 					}
// 				}

// 				&:last-child {
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;
// 					flex-direction: column;
// 					flex: 436;

// 					&>div:first-child {
// 						width: 100%;
// 						height: 160px !important;
// 						margin-bottom: 16px;
// 					}

// 					&>div:last-child {
// 						width: 80%;
// 					}
// 				}
// 			}
// 		}

// 		.thr {
// 			width: 100%;
// 			height: 100%;
// 			padding: 16px;
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;
// 			flex-direction: column;

// 			.ChartsBox {
// 				&>div:first-child {
// 					font-size: 36px;
// 					font-family: Bahnschrift-Bold, Bahnschrift;
// 					font-weight: bold;
// 					color: #ffffff;
// 				}

// 				&>div:last-child {
// 					font-size: 16px;
// 					font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
// 					font-weight: bold;
// 					color: #f9fa5f;
// 				}
// 			}

// 			&>div:last-child {
// 				width: 100%;
// 				margin: 16px 0;

// 				&>div {
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;
// 					margin: 8px 0;

// 					&>img {
// 						width: 48px;
// 						height: 48px;
// 						display: block;
// 						margin-right: 16px;
// 					}

// 					&>div {
// 						&>div:first-child {
// 							font-size: 18px;
// 							font-family: MicrosoftYaHei;
// 							font-weight: bold;
// 							color: #ffffff;
// 						}

// 						&>div:last-child {
// 							font-size: 30px;
// 							font-family: Bahnschrift;
// 							font-weight: bold;
// 							color: #ffffff;
// 						}
// 					}
// 				}
// 			}
// 		}
// 	}
// }

.ThrOne,
.ThrFou,
.NinOne,
.FouOne,
.FouTwo,
.FouThr,
.FouFou,
.SixA04,
.SixA02 {
	.ProjectListTem {
		width: 400px;
		margin-right: 16px;
	}
}

.FouOne {
	.box {
		width: 100%;
		height: 100%;
		overflow: hidden;

		& > .FrontTableList {
			width: 100%;
			height: 100%;
		}
	}
}

.FouTwo,
.FouThr,
.FouFou {
	.one {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > .box {
			margin-top: 16px;
			width: 100%;
			background: linear-gradient(
				rgba(0, 44, 91, 0.35),
				rgba(0, 181, 213, 0.35)
			);

			& > div:first-child {
				width: 100%;
				height: 72px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 16px;
				border-bottom: 1px solid rgba(53, 197, 219, 1);
				font-size: 16px;
				font-family: MicrosoftYaHei;
				color: #ffffff;
			}

			& > .FouTwoBox {
				& > div {
					width: calc(100% / 3);
					height: 120px;
					border-right: 1px solid rgba(53, 197, 219, 1);
					border-bottom: 1px solid rgba(53, 197, 219, 1);

					&:nth-child(3) {
						border-right: none;
					}

					&:nth-child(4),
					&:nth-child(5) {
						border-bottom: none;
					}
				}
			}
		}
	}
}

.FivOne {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;

	& > .navOpen {
		position: absolute;
		left: 0;
		top: 130px;
		z-index: 5;
		cursor: pointer;
	}

	& > .Lef,
	& > .Rig {
		position: absolute;
		top: 168px;
		bottom: 85px;
		width: 410px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		z-index: 2;

		&.Lef {
			left: 16px;
		}

		&.Rig {
			right: 16px;

			.BeamSchedule001 > div .Title > div {
				background-color: rgba(2, 53, 106, 0.5);
			}
		}
	}
}

.SixTwo {
	& > div:nth-child(3),
	& > div:nth-child(4) {
		margin-top: 120px;
		height: calc(100% - 120px);
	}

	& > .Nav {
		position: absolute;
		left: 0;
		top: 240px;
		width: 100%;
		height: 40px;
		background: linear-gradient(
			180deg,
			rgba(0, 44, 91, 0.2),
			rgba(0, 181, 213, 0.35)
		);
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			font-size: 14px;
			font-family: Adobe Heiti Std;
			color: #ffffff;
			width: 80px;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			cursor: pointer;

			&::after {
				position: absolute;
				content: "";
				left: 0;
				top: 0;
				width: 1px;
				height: 25px;
				background: rgba(7, 227, 237, 1);
				transform: rotate(30deg);
			}

			&:last-child {
				&::before {
					position: absolute;
					content: "";
					right: 0;
					top: 0;
					width: 1px;
					height: 25px;
					background: rgba(7, 227, 237, 1);
					transform: rotate(30deg);
				}
			}

			&.active,
			&:hover {
				text-shadow: 0 0 8px #fff;
			}
		}
	}

	.children {
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;

		& > .Image {
			width: 100%;
			height: 200px;
			background: linear-gradient(
				0deg,
				rgba(0, 181, 213, 0.35),
				rgba(0, 44, 91, 0.35)
			);
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 16px;

			& > .List {
				flex: 1;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;

					& > img {
						width: 32px;
						height: 32px;
						display: block;
						margin-right: 8px;
					}

					& > div {
						& > div:first-child {
							font-size: 14px;
							font-family: MicrosoftYaHei;
							color: #5fe9ff;
						}

						& > div:last-child {
							font-size: 22px;
							font-family: DIN Condensed;
							font-weight: bold;
							color: #ffffff;

							& > span {
								font-size: 14px;
								font-family: MicrosoftYaHei;
								color: #5fe9ff;
								margin: 0 4px;
							}
						}
					}
				}
			}
		}

		& > .List {
			flex: 1;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			overflow: hidden;

			& > div {
				width: 100%;

				&:first-child {
					height: 46px;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 46px;
						background: rgba(15, 235, 247, 0.2);
						margin: 0 1px;
						font-size: 18px;
						font-family: MicrosoftYaHei;
						font-weight: bold;
						color: #ffffff;
						flex: 1;
					}
				}

				&:last-child {
					flex: 1;
					overflow-y: scroll;

					& > div {
						height: 40px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20px;
						font-family: MicrosoftYaHei;
						font-weight: bold;
						color: #ffffff;
						border-bottom: 1px solid rgba(57, 167, 225, 0.2);

						& > div {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
}

.SixFou {
	.children {
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div:first-child {
			width: 100%;
			height: 240px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 16px;

			& > div {
				flex: 1;
				height: 100%;
				margin: 0 16px;
			}
		}

		& > div:last-child {
			flex: 1;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			& > div:first-child {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-right: 16px;

				& > img {
					width: 422px;
					height: 380px;
					display: block;
				}

				& > div:nth-child(2) {
					font-size: 42px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #ffffff;
					margin-bottom: 8px;
				}

				& > div:nth-child(3) {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 349px;
					height: 44px;
					background: #ffffff;
					font-size: 22px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #c90000;
				}
			}

			& > div:last-child {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;
				overflow: hidden;

				& > div:first-child {
					width: 100%;
					height: 68px;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;

					& > div {
						height: 68px;
						display: flex;
						align-items: center;
						justify-content: center;
						background: rgba(1, 97, 117, 0.6);
						font-size: 21px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						margin: 0 1px;
					}
				}

				& > div:last-child {
					width: 100%;
					flex: 1;
					overflow-y: scroll;

					& > div {
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid rgba(175, 253, 245, 0.6);

						& > div {
							height: 56px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 19px;
							font-family: PingFang SC;
							font-weight: 400;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
}

.SixFiv {
	& > .right {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;
	}

	.children {
		padding: 16px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: baseline;
		flex-direction: column;
		flex: 1;

		& > div {
			width: 100%;
		}

		.TitleSmall001 {
			margin: 4px 0 16px 0;
		}

		.List {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			overflow: hidden;

			& > div:first-child {
				width: 100%;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div {
					height: 100%;
					margin: 0 1px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					background: rgba(1, 195, 175, 0.4);
				}
			}

			& > div:last-child {
				width: 100%;
				flex: 1;
				overflow-y: scroll;

				& > div {
					width: 100%;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid rgba(57, 167, 225, 0.2);

					& > div {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
		}
	}
}

.EigOne {
	& > div {
		width: 100%;

		&.Top {
			flex: 1;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			.Nav {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > div:first-child {
					width: 100%;
					height: 68px;
					margin-bottom: 16px;
					background: rgba(0, 37, 76, 0.8);
					border-radius: 33px;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						height: 100%;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #b0fef6;
						cursor: pointer;
						user-select: none;

						&.active {
							background: rgba(0, 44, 65, 0.8);
							border: 2px solid #a5eafd;
							border-radius: 33px;
						}
					}
				}

				& > div:last-child {
					width: 100%;
					flex: 1;
				}
			}
		}

		&.Btm {
			flex: 1;
		}
	}
}

.NinOne {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;

	.Btm {
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 85px;
		height: 300px;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
}

.OneA01 {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 87px 17px 44px 17px;

	& > div {
		width: 100%;

		&.Top {
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				width: 900px;
				height: 200px;
				display: flex;
				align-items: flex-start;
				justify-content: space-evenly;
				flex-direction: column;
				background: radial-gradient(
					circle farthest-side at 50% 100%,
					rgba(33, 175, 213, 0.5),
					rgba(9, 39, 57, 0)
				);
				padding: 0 4vw;

				& > div {
					font-size: 38px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;

					& > span {
						font-size: 60px;
					}
				}
			}

			& > img:first-child {
				height: 270px;
				margin-right: -20px;
			}

			& > img:last-child {
				width: 320px;
				margin-left: -40px;
			}
		}

		&.Btm {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.one,
			.two {
				padding: 16px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				overflow: hidden;

				& > div:first-child {
					height: 220px !important;
					margin-bottom: 16px;

					&.Image {
						position: relative;
						z-index: 1;

						& > img {
							height: 220px;
						}

						& > div {
							text-align: center;
							position: absolute;
							left: 0;
							top: -20px;
							width: 100%;
							font-size: 74px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #ff4f52;
							z-index: 1;
						}
					}
				}
			}

			.two {
				& > .AfterList {
					& > div {
						cursor: pointer;
					}
				}
			}

			.thr {
				width: 100%;
				height: 100%;
				padding: 16px;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > div:first-child {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& > div {
						flex: 1;
						padding: 0 8px;
						margin: 0 16px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;
						z-index: 1;
						font-size: 24px;
						font-family: YouSheBiaoTiHei;
						cursor: pointer;

						&::after {
							position: absolute;
							content: "";
							left: 0;
							bottom: 4px;
							width: 100%;
							height: 12px;
							background: linear-gradient(
								90deg,
								rgba(0, 255, 238, 0.35),
								rgba(0, 255, 238, 0)
							);
							z-index: -1;
						}

						& > div:last-child {
							color: #ffffff;
						}
					}
				}

				& > div:last-child {
					width: 100%;
					flex: 1;
				}
			}
		}
	}
}

.TwoA01,
.TwoOne {
	& > .left {
		width: 400px;
		height: 100%;
		position: relative;
		z-index: 2;
		margin-right: 16px;
	}

	& > .right {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			width: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			&:nth-child(1) {
				margin-bottom: 16px;
			}

			.A01 {
				width: 100%;
				height: 100%;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div {
					height: 100%;
					flex: 1;

					&.list {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						flex-direction: column;

						& > div {
							width: 80%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							position: relative;
							z-index: 1;
							padding: 0 8px;

							&::after {
								position: absolute;
								content: "";
								z-index: -1;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 10px;
								background: linear-gradient(
									90deg,
									rgba(0, 255, 238, 0.2),
									rgba(0, 255, 238, 0)
								);
							}

							& > div:first-child {
								font-size: 26px;
								font-family: MicrosoftYaHei;
								font-weight: bold;
							}

							& > div:last-child {
								font-size: 30px;
								font-family: MicrosoftYaHei;
								font-weight: bold;
								color: #ffffff;
							}
						}
					}
				}
			}

			.A02 {
				width: 100%;
				height: 100%;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > .Chart {
					width: 100%;
					flex: 1;
				}

				& > .list {
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;
						z-index: 1;
						padding: 0 16px;
						margin: 4px 0;

						&::after {
							position: absolute;
							content: "";
							z-index: -1;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 10px;
							background: linear-gradient(
								90deg,
								rgba(0, 255, 238, 0.2),
								rgba(0, 255, 238, 0)
							);
						}

						& > div:first-child {
							font-size: 20px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
						}

						& > div:last-child {
							font-size: 26px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #ffffff;
						}
					}
				}
			}

			.A03 {
				width: 100%;
				height: 100%;
			}

			.A04 {
				width: 100%;
				height: 100%;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > .Chart {
					width: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						width: 310px;
						height: 240px;
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;

						& > img {
							position: absolute;
							z-index: -1;
							width: 310px;
							height: 240px;
							left: 0;
							top: 0;
						}

						& > div {
							padding-top: 5px;
							width: 180px;
							height: 180px !important;
						}
					}
				}

				& > .list {
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;
						z-index: 1;
						padding: 0 16px;
						margin: 4px 0;

						&::after {
							position: absolute;
							content: "";
							z-index: -1;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 10px;
							background: linear-gradient(
								90deg,
								rgba(0, 255, 238, 0.2),
								rgba(0, 255, 238, 0)
							);
						}

						& > div:first-child {
							font-size: 20px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
						}

						& > div:last-child {
							font-size: 26px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
}

.FivA01,
.TenOne {
	flex-direction: column;

	& > div {
		width: 100%;

		&.top {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 421;
			margin-bottom: 16px;
		}
	}
}

.NinA01 {
	& > .left,
	& > .right {
		flex: 74;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		&.left {
			margin-right: 16px;
		}
	}
}

.SixOne,
.ThrA01 {
	& > .left {
		width: 400px;
		height: 100%;
		position: relative;
		z-index: 2;
		margin-right: 16px;
	}

	& > .right {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			width: 100%;
			flex: 1;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			&.top {
				margin-bottom: 16px;
			}

			.A01 {
				width: 100%;
				height: 100%;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div {
					flex: 1;
					height: 100%;

					&.Charts {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					&.List {
						display: flex;
						align-items: flex-start;
						justify-content: space-evenly;
						flex-direction: column;

						& > div {
							width: 70%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							z-index: 1;

							&::after {
								position: absolute;
								content: "";
								left: 32px;
								top: 8px;
								width: 100%;
								height: 52px;
								background: linear-gradient(
									90deg,
									rgba(1, 129, 153, 1),
									rgba(1, 129, 153, 0)
								);
								z-index: -1;
							}

							& > div {
								&:nth-child(1) {
									border: 1px solid var(--color);
									width: 68px;
									height: 68px;
									border-radius: 50%;
									display: flex;
									align-items: center;
									justify-content: center;
									background: rgba(17, 51, 61, 1);

									& > span {
										font-size: 48px;
										color: var(--color);
									}
								}

								&:nth-child(2) {
									flex: 1;
									font-size: 20px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
									color: var(--color);
									margin: 0 16px;
								}

								&:nth-child(3) {
									font-size: 24px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
									color: #ffffff;
								}
							}
						}
					}
				}
			}

			.A02 {
				width: 100%;
				height: 100%;
				padding: 32px;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div {
					height: 100%;

					&.ListA01 {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						flex-direction: column;

						& > div {
							width: 80%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							z-index: 1;

							&::after {
								position: absolute;
								z-index: -1;
								content: "";
								left: 72px;
								bottom: 8px;
								width: calc(100% - 72px);
								height: 12px;
								background: linear-gradient(
									90deg,
									rgba(0, 255, 238, 0.2),
									rgba(0, 255, 238, 0)
								);
							}

							& > img {
								width: 60px;
								height: 60px;
								display: block;
								margin-right: 16px;
							}

							& > div:nth-child(2) {
								flex: 1;
								font-size: 24px;
								font-family: MicrosoftYaHei;
								font-weight: bold;
							}

							& > div:nth-child(3) {
								font-size: 30px;
								font-family: MicrosoftYaHei;
								font-weight: bold;
								color: #ffffff;
								margin-right: 8px;
							}
						}
					}

					&.ListA02 {
						flex: 1;
						background: rgba(1, 129, 153, 0.1);
						border: 2px solid rgba(29, 229, 231, 0.1);
						padding: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-right: 16px;

						& > div:first-child {
							height: 120px !important;
						}

						& > .List {
							width: 80%;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;

							& > div {
								width: 80%;
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;
								z-index: 1;
								margin: 8px 0;

								&::after {
									position: absolute;
									z-index: -1;
									content: "";
									left: 72px;
									bottom: 8px;
									width: calc(100% - 72px);
									height: 12px;
									background: linear-gradient(
										90deg,
										rgba(0, 255, 238, 0.2),
										rgba(0, 255, 238, 0)
									);
								}

								& > img {
									width: 60px;
									height: 60px;
									display: block;
									margin-right: 16px;
								}

								& > div:nth-child(2) {
									flex: 1;
									font-size: 24px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
								}

								& > div:nth-child(3) {
									font-size: 30px;
									font-family: MicrosoftYaHei;
									font-weight: bold;
									color: #ffffff;
									margin-right: 8px;
								}
							}
						}
					}

					&.ListA03 {
						width: 260px;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div {
							flex: 1;
							width: 100%;
							margin: 8px 0;
							background: rgba(1, 129, 154, 0.1);
							display: flex;
							align-items: center;
							justify-content: center;

							& > img {
								width: 112px;
								height: 98px;
								display: block;
								margin: 0 16px;
							}

							& > div {
								flex: 1;

								& > div:first-child {
									font-family: MicrosoftYaHei, MicrosoftYaHei;
									font-weight: bold;
									font-size: 16px;
									color: #ffffff;
								}

								& > div:last-child {
									font-family: MicrosoftYaHei, MicrosoftYaHei;
									font-weight: bold;
									font-size: 30px;
									color: #ffffff;
								}
							}
						}
					}
				}
			}

			.A03 {
				width: 100%;
				height: 100%;
			}

			.A04 {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > div {
					flex: 1;
					width: 100%;
					margin: 8px 0;
					display: flex;
					align-items: center;
					justify-content: center;

					& > img {
						width: 55px;
						height: 55px;
						display: block;
						margin: 0 16px;
					}

					& > div {
						flex: 1;

						& > div:first-child {
							font-family: MicrosoftYaHei, MicrosoftYaHei;
							font-weight: bold;
							font-size: 16px;
							color: #ffffff;
							text-align: center;
						}

						& > div:last-child {
							font-family: MicrosoftYaHei, MicrosoftYaHei;
							font-weight: bold;
							font-size: 30px;
							color: #ffffff;
							text-align: center;
						}
					}
				}
			}
		}
	}
}

// .SixOne {
// 	.center {
// 		flex: 1;
// 		height: 100%;
// 		margin: 0 16px;
// 		display: flex;
// 		align-items: center;
// 		justify-content: center;
// 		flex-direction: column;

// 		.A01 {
// 			width: 100%;
// 			height: 100%;
// 			padding: 16px;
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;

// 			& > div {
// 				flex: 1;
// 				height: 100%;

// 				&.Charts {
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;
// 				}

// 				&.List {
// 					display: flex;
// 					align-items: flex-start;
// 					justify-content: space-evenly;
// 					flex-direction: column;

// 					& > div {
// 						width: 70%;
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						position: relative;
// 						z-index: 1;

// 						&::after {
// 							position: absolute;
// 							content: "";
// 							left: 32px;
// 							top: 8px;
// 							width: 100%;
// 							height: 52px;
// 							background: linear-gradient(
// 								90deg,
// 								rgba(1, 129, 153, 1),
// 								rgba(1, 129, 153, 0)
// 							);
// 							z-index: -1;
// 						}

// 						& > div {
// 							&:nth-child(1) {
// 								border: 1px solid var(--color);
// 								width: 68px;
// 								height: 68px;
// 								border-radius: 50%;
// 								display: flex;
// 								align-items: center;
// 								justify-content: center;
// 								background: rgba(17, 51, 61, 1);

// 								& > span {
// 									font-size: 48px;
// 									color: var(--color);
// 								}
// 							}

// 							&:nth-child(2) {
// 								flex: 1;
// 								font-size: 20px;
// 								font-family: MicrosoftYaHei;
// 								font-weight: bold;
// 								color: var(--color);
// 								margin: 0 16px;
// 							}

// 							&:nth-child(3) {
// 								font-size: 24px;
// 								font-family: MicrosoftYaHei;
// 								font-weight: bold;
// 								color: #ffffff;
// 							}
// 						}
// 					}
// 				}
// 			}
// 		}
// 	}

// 	.right {
// 		flex-direction: column;

// 		.A03 {
// 			width: 100%;
// 			height: 240px;
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;
// 			flex-direction: column;
// 			background: linear-gradient(
// 				0deg,
// 				rgba(5, 35, 49, 0.2),
// 				rgba(5, 35, 49, 0.2)
// 			);
// 			border: 1px solid rgba(1, 129, 153, 0.2);
// 			margin-bottom: 16px;

// 			& > img {
// 				width: 90px;
// 				height: 78px;
// 				display: block;
// 			}

// 			& > div:nth-child(2) {
// 				font-size: 20px;
// 				font-family: MicrosoftYaHei;
// 				color: #ffffff;
// 				margin: 8px 0;
// 			}

// 			& > div:nth-child(3) {
// 				height: 54px;
// 				font-size: 54px;
// 				line-height: 54px;
// 				font-family: MicrosoftYaHei;
// 				font-weight: bold;
// 				color: #ffffff;
// 				text-shadow: 0px 0px 29px #ff1800;
// 			}
// 		}

// 		.A04 {
// 			width: 100%;
// 			height: 100%;
// 			padding: 16px 32px;
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;
// 			flex-direction: column;

// 			& > div {
// 				flex: 1;
// 				width: 100%;
// 				margin: 8px 0;
// 				position: relative;
// 				z-index: 1;

// 				& > img {
// 					position: absolute;
// 					left: 0;
// 					top: 0;
// 					width: 100%;
// 					height: 100%;
// 					display: block;
// 				}

// 				& > div {
// 					width: 100%;
// 					height: 100%;
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;

// 					& > img {
// 						width: 56px;
// 						height: 56px;
// 						display: block;
// 						margin-right: 16px;
// 					}

// 					& > div {
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						flex-direction: column;
// 						font-size: 21px;
// 						font-family: MicrosoftYaHei;
// 						font-weight: bold;
// 						color: #ffffff;

// 						& > div {
// 							margin: 2px 0;
// 						}
// 					}
// 				}
// 			}
// 		}
// 	}
// }

.FouA01,
.SevOne {
	flex-direction: column;

	& > .top {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
	}

	& > .btm {
		width: 100%;
		flex: 1;
	}
}

.FouA01,
.SevOne {
	.two,
	.thr {
		width: 100%;
		height: 100%;
	}

	.one {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		& > div {
			width: 45%;
			margin: 8px 0;
			height: 100px;
			background: rgba(15, 65, 87, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			cursor: pointer;

			& > span {
				font-size: 32px;
				margin: 0 16px;
			}

			& > div {
				flex: 1;

				& > div:first-child {
					height: 14px;
					line-height: 14px;
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					margin-bottom: 16px;
				}

				& > div:last-child {
					height: 23px;
					line-height: 23px;
					font-size: 23px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
				}
			}
		}
	}

	.fou {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > .Top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 32px;

			.Nav {
				width: 400px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-family: MicrosoftYaHei;
				color: #ffffff;
				margin-bottom: 8px;

				& > div {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(13, 49, 89, 1);
					margin: 0 1px;
					cursor: pointer;

					&:hover,
					&.active {
						background: linear-gradient(
							rgba(255, 190, 98, 1),
							rgba(185, 30, 0, 1)
						);
					}
				}
			}
		}

		& > .Charts {
			flex: 1;
			width: 100%;
		}
	}
}

.FivA01,
.TenOne {
	.one,
	.two,
	.thr,
	.fou {
		width: 100%;
		height: 100%;
	}

	.one {
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			width: 100%;

			&:first-child {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				& > div {
					width: 30%;
					height: 142px;
					border: 2px solid rgba(29, 229, 231, 0.2);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin: 4px 0;

					& > span {
						color: white;
						font-size: 46px;
					}

					& > div:nth-child(2) {
						height: 14px;
						line-height: 14px;
						font-size: 14px;
						font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
						font-weight: bold;
						color: #ffffff;
						margin: 8px 0;
					}

					& > div:nth-child(3) {
						height: 24px;
						line-height: 24px;
						font-size: 24px;
						font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
						font-weight: bold;
						color: #efbf51;
					}
				}
			}

			&:last-child {
				margin: 16px;

				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				font-family: YouSheBiaoTiHei;
				color: #ffffff;
				border: 2px solid #a3fff3;
				background: linear-gradient(rgba(0, 64, 58, 1), rgba(55, 238, 255, 1));
				border-radius: 50px;
				cursor: pointer;

				display: none;
			}
		}
	}
}

.EleA01,
.NinOne {
	& > div:first-child {
		margin-right: 16px;
	}

	& > div {
		height: 100%;
		overflow: hidden;

		&.Right {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.one,
			.two {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.SixA04,
.ThrFou {
	.one {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > .Select {
			height: 30px;
			width: 100%;
			margin-bottom: 8px;
			background: linear-gradient(
				90deg,
				rgba(51, 253, 255, 0),
				rgba(51, 253, 255, 0.5),
				rgba(51, 253, 255, 0)
			);
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				margin: 0 24px;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div:first-child {
					font-size: 18px;
					font-family: YouSheBiaoTiHei;
					color: #9bfdfe;
					margin-right: 8px;
				}

				& > div:last-child {
					.ant-select-selector {
						height: 30px;
						background: transparent;
						font-size: 18px;
						font-family: YouSheBiaoTiHei;
						color: #9bfdfe;
						margin-right: 8px;
					}
				}
			}
		}

		& > .Video {
			flex: 1;
			width: 100%;
		}
	}
}

.NinA01 {
	.one,
	.two,
	.thr,
	.fou,
	.fiv {
		width: 100%;
		height: 100%;
	}

	.one {
		padding: 16px 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 24px 0;
			position: relative;

			&::after {
				position: absolute;
				content: "";
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				background: linear-gradient(
					90deg,
					rgba(2, 132, 188, 0),
					rgba(2, 132, 188, 1) 20%,
					rgba(2, 132, 188, 1) 80%,
					rgba(2, 132, 188, 0)
				);
			}

			& > img {
				width: 72px;
				height: 72px;
				display: block;
				margin-right: 16px;
			}

			& > div {
				flex: 1;

				& > div:first-child {
					height: 18px;
					line-height: 18px;
					font-size: 18px;
					font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
					font-weight: bold;
					color: #c9fbff;
					margin-bottom: 16px;
				}

				& > div:last-child {
					height: 40px;
					line-height: 40px;
					display: flex;
					align-items: baseline;
					justify-content: flex-start;
					font-size: 48px;
					font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
					font-weight: bold;
					color: #c9fbff;

					& > span {
						font-size: 18px;
						font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
						font-weight: bold;
						color: #c9fbff;
						margin: 0 16px;
					}
				}
			}
		}
	}
}

.SevA01 {
	.OneThr {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;

		& > div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 48px;
			border-bottom: 1px solid rgba(103, 222, 209, 0.2);
			padding: 0 16px;
			cursor: pointer;

			& > span {
				font-size: 22px;
				margin-right: 16px;
			}

			& > div:nth-child(2) {
				flex: 1;
				font-size: 14px;
				font-family: MicrosoftYaHei;
				color: #ffffff;
			}

			& > div:nth-child(3) {
				font-size: 14px;
				font-family: MicrosoftYaHei;
				color: #ffffff;
			}
		}
	}
}

.TenA01 {
	& > img {
		width: 100%;
		display: block;
	}

	& > div {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div:first-child {
			width: 100%;
			height: 148px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > img {
				height: 148px;
				display: block;
			}

			& > div {
				width: 100%;
				height: 148px;
				line-height: 148px;
				background: radial-gradient(
					circle farthest-side at 50% 100%,
					rgba(33, 175, 213, 0.5),
					rgba(9, 39, 57, 0)
				);
				display: flex;
				align-items: baseline;
				justify-content: center;
				font-size: 38px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;

				& > span {
					font-size: 60px;
					margin: 0 4px;
				}
			}
		}

		& > div:last-child {
			width: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.one {
		padding: 16px;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div:first-child {
			width: 100%;
			height: 200px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div:first-child {
				width: 200px;
			}

			& > div:last-child {
				flex: 1;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 4px 0;

					& > div:first-child {
						width: 24px;
						height: 24px;
						margin-right: 16px;
					}

					& > div:last-child {
						font-size: 18px;
						font-family: MicrosoftYaHei;
						color: #ffffff;
					}
				}
			}
		}

		& > div:last-child {
			width: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;

			& > div {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 8px;
				width: 100%;
				height: 40px;
				margin: 8px 0;
				position: relative;
				z-index: 1;

				&::after {
					position: absolute;
					content: "";
					left: 0;
					bottom: 0;
					width: 100%;
					height: 8px;
					background: linear-gradient(
						90deg,
						rgba(0, 255, 238, 0.35),
						rgba(0, 255, 238, 0)
					);
				}

				& > div:first-child {
					font-size: 24px;
					font-family: YouSheBiaoTiHei;
					color: #ffffff;
					flex: 1;
				}

				& > div:nth-child(2),
				& > div:nth-child(3) {
					width: 93px;
					height: 30px;
					background: linear-gradient(
						rgba(0, 64, 58, 1),
						rgba(55, 238, 255, 1)
					);
					border-radius: 50px;
					border: 2px solid #a3fff3;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #ffffff;
					margin-left: 8px;
					cursor: pointer;
				}
			}
		}
	}

	.two {
		width: 100%;
		height: 100%;
	}
}
